<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Liquid 模板语言中文文档 | Liquid 中文网</title>

    <meta name="description" content="Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。Liquid 是安全、面向客户的模板语言，用于构建灵活的 web 应用。">
    <meta name="author" content="Shopify">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="static/css/main2.css">
    <link rel="icon" type="image/png" href="https://liquid.bootcss.com/images/icons/water-drop-32x.png" sizes="32x32">
    <link rel="icon" type="image/png" href="https://liquid.bootcss.com/images/icons/water-drop-64x.png" sizes="64x64">
    <link rel="canonical" href="">
    <link rel="alternate" type="application/rss+xml" title="Liquid 模板语言中文文档" href="https://liquid.bootcss.com/feed.xml">

    <meta property="og:site_name" content="Liquid 模板语言中文文档">
    <meta property="og:type" content="website">
    <meta property="og:url" content="/">
    <meta property="og:title" content="Liquid 模板语言中文文档">
    <meta property="og:description" content="Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。Liquid 是安全、面向客户的模板语言，用于构建灵活的 web 应用。">

    <meta name="twitter:site" content="Liquid 模板语言中文文档">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="https://liquid.bootcss.com">
    <meta name="twitter:title" content="Liquid 模板语言中文文档">
    <meta name="twitter:description" content="Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。Liquid 是安全、面向客户的模板语言，用于构建灵活的 web 应用。">
  </head>

  <body>

    <div class="sidebar">
  <header class="sidebar__logo" role="banner">
    
      Liquid
    
  </header><nav class="sidebar__nav">
    <div class="sidebar__nav-interior"><h3 class="section__header">Basics</h3>

        <ul class="section__links"><li class="section__item">
                <a href="javascript:;" class="section__link ">简介</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">操作符</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">真值与假值</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">数据类型</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">Liquid 的各种分支</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">控制输出的空白符</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link "></a>
              </li></ul><h3 class="section__header">Tags</h3>

        <ul class="section__links"><li class="section__item">
                <a href="javascript:;" class="section__link ">注释</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">控制流</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">迭代／循环</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">原始内容</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">变量</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link "></a>
              </li></ul><h3 class="section__header">Filters</h3>

        <ul class="section__links"><li class="section__item">
                <a href="javascript:;" class="section__link ">abs</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">append</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">at_least</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">at_most</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">capitalize</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">ceil</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">compact</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">concat</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">date</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">default</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">divided_by</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">downcase</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">escape</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">escape_once</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">first</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">floor</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">join</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">last</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">lstrip</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">map</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">minus</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">modulo</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">newline_to_br</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">plus</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">prepend</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">remove</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">remove_first</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">replace</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">replace_first</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">reverse</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">round</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">rstrip</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">size</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">slice</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">sort</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">sort_natural</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">split</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">strip</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">strip_html</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">strip_newlines</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">times</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">truncate</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">truncatewords</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">uniq</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">upcase</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">url_decode</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link ">url_encode</a>
              </li><li class="section__item">
                <a href="javascript:;" class="section__link "></a>
              </li></ul></div>
  </nav>
</div>

    <div class="content__overlay"></div>
    <main class="content__area" role="main">
      <div class="content">
        <button class="menu-button">
          <span aria-hidden="true"><svg height="16" viewbox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 9h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm0-4h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm-10.82 6h10.81c.59 0 .59.41.59 1s0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1s0-1 .59-1z"></path></svg></span>
          <span>Menu</span>
        </button>
        
        <div class="home-banner">
  <h1>Liquid</h1>
  <p>安全、面向客户的模板语言，用于构建灵活的 web 应用。</p>
  <p class="btn-row">
    <a href="javascript:;" target="_blank" class="btn">
      <span aria-hidden="true"><svg height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m4 6h3v-6h2v6h3l-4 4zm11-4h-4v1h4v8h-14v-8h4v-1h-4c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2h5.34c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z" fill-rule="evenodd"></path></svg></span> 下载
    </a>
    <a href="javascript:;" target="_blank" class="btn">
      <span aria-hidden="true"><svg height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8 0c-4.42 0-8 3.58-8 8 0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38 3.16-1.06 5.45-4.06 5.45-7.59 0-4.42-3.58-8-8-8z" fill-rule="evenodd"></path></svg></span> GitHub 源码仓库
    </a>
  </p>
</div>

<p>Liquid 是一门开源的模板语言，由 <a href="javascript:;">Shopify</a> 创造并用 Ruby 实现。它是 Shopify 主题的骨骼，并且被用于加载店铺系统的动态内容。</p>

<p>从 2006 年起，Liquid 就被 Shopify 所使用，现在更是被大量 web 应用所使用。</p>

<h2 id="liquid-用户列表">Liquid 用户列表</h2>

<div class="home-users-grid">
  <div class="home-users-grid__item">
    <a href="javascript:;" target="_blank">
      <img src="static/picture/jekyll-logo.png" alt="Jekyll logo">
    </a>
  </div>
  <div class="home-users-grid__item">
    <a href="javascript:;" target="_blank">
      <img src="static/picture/salesforcedesk-logo.png" alt="Desk logo">
    </a>
  </div>
  <div class="home-users-grid__item">
    <a href="javascript:;" target="_blank">
      <img src="static/picture/zendesk-logo.png" alt="ZenDesk logo">
    </a>
  </div>
  <div class="home-users-grid__item">
    <a href="javascript:;" target="_blank">
      <img src="static/picture/500px-logo.png" alt="500px logo">
    </a>
  </div>
</div>

<p class="home-users-blurb">...and <a href="javascript:;" target="_blank">many more</a></p>


      </div>
    </main>
    <script src="static/js/script.js"></script>
  </body>
</html>
